<template>
  <main>
    <a-card v-for="cardRecord of cardRecords" :key="cardRecord.month" :title="cardRecord.month">
      <a-timeline>
        <a-timeline-item v-for="record of cardRecord.data" :key="record.id" :color="useRandomColor()">
          <a-button @click="toDetailPage(record.id)">
            {{ record.createdAt }} - {{ record.title }}
          </a-button>
        </a-timeline-item>
      </a-timeline>
    </a-card>
  </main>
</template>

<script>
  import { useRandomColor } from "@u/color.js";
  import http from "@u/http";
  import { ref, watchEffect } from "@vue/runtime-core";
  import { useInfoNotice } from "@u/notice";
  import { useRoutePathToPage } from "@u/router";
  export default {
    setup() {
      const cardRecords = ref([]);

      watchEffect(async () => {
        try {
          const res = await http.get("/articles/all/archives");
          cardRecords.value = res.data;
        } catch (error) {
          useInfoNotice({
            message: "获取失败",
            description: error.reason || "未知错误",
          });
        }
      });

      const toDetailPage = (id) => {
        const toPage = useRoutePathToPage(`/detail/${id}`);
        toPage();
      };

      return {
        cardRecords,
        useRandomColor,
        toDetailPage,
      };
    },
  };
</script>

<style>
</style>